<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>待审核语料库</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">词义</label>
                        <div class="layui-input-inline">
                            <input type="text" name="word" placeholder="请输入查询词义" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">作者</label>
                        <div class="layui-input-inline">
                            <input type="text" name="author" placeholder="请输入查询作者" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                            <i class="layui-icon layui-icon-search"></i>
                            查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="user-table" lay-filter="user-table"></table>
        </div>
    </div>

    <script type="text/html" id="user-toolbar">
        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="batchAdd">
            <i class="layui-icon layui-icon-add-1"></i>
            批量添加
        </button>
        <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
            <i class="layui-icon layui-icon-delete"></i>
            批量删除
        </button>
    </script>

    <script type="text/html" id="user-bar">
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="view">
            <i class="layui-icon layui-icon-chart-screen"></i>查看
        </button>
    </script>

    <script type="text/html" id="user-createTime">
        {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
    </script>

    <div id="win" style="padding:20px;display:none">
        <form class="layui-form" action="javascript:void(0);">
            <div class="layui-form-item">
                <label class="layui-form-label"> 作者</label>
                <div class="layui-input-inline">
                    <input type="text" name="author" lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 手语图片</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-primary layui-border-orange" id="test2">多图片上传</button>
                    (说明：仅支出GIF图片，图片大小360*202像素，文件名采用词义命名。)
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo2"></div>
                    </blockquote>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add"> 立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary"> 重置</button>
                </div>
            </div>
        </form>
    </div>
    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script>
        layui.use(['layer', 'form', 'table', 'jquery', 'upload', 'common', 'http', 'toast', 'loading'], function () {
            let layer = layui.layer;
            let form = layui.form;
            let table = layui.table;
            let $ = layui.jquery;
            let common = layui.common;
            let upload = layui.upload;
            let http = layui.http;
            let toast = layui.toast;
            let loading = layui.loading;

            let cols = [[
                { type: 'checkbox' },
                { title: '词义', field: 'word' },
                { title: '作者', field: 'author', width: 150 },
                { title: '提交时间', field: 'lastDate', templet: '#user-createTime', width: 130 },
                { title: '操作', toolbar: '#user-bar', align: 'center', width: 130 }
            ]]

            table.render({
                elem: '#user-table',
                url: '/YuLiaoK/page',
                page: true,
                cols: cols,
                skin: 'line',
                toolbar: '#user-toolbar',
                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports'],
                request: {
                    pageName: 'PageIndex',
                    limitName: 'PageSize'
                },
                parseData: function (res) {
                    return {
                        "count": res.result.total,
                        'statusCode': res.code,
                        'data': res.result.items
                    };
                },
                response: {
                    statusName: 'statusCode',
                    statusCode: 200
                }
            });

            table.on('tool(user-table)', function (obj) {
                if (obj.event === 'view') {
                    layer.open({
                        title: ''
                        , content: '<img src="' + obj.data.gif + '" alt="' + obj.data.word + '">'
                    });
                }
            });

            table.on('toolbar(user-table)', function (obj) {
                if (obj.event === 'refresh') {
                    table.reload('user-table');
                } else if (obj.event === 'batchAdd') {
                    window.add();
                } else if (obj.event === 'batchRemove') {
                    window.batchRemove(obj);
                }
            });
            form.on('submit(user-query)', function (data) {
                table.reload('user-table', {
                    where: data.field
                })
                return false;
            });

            window.batchRemove = function (obj) {
                //
                var checkIds = common.checkField(obj, 'id');
                if (checkIds === "") {
                    layer.msg("未选中数据", { icon: 3, time: 1000 });
                    return false;
                }
                var msg = '确定要删除这些语料库吗';
                layer.confirm(msg, {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    loading.Load(5, '请稍等...');
                    http.ajax({
                        url: '/YuLiaoK/batchDelete',
                        data: JSON.stringify({ lstid: checkIds.split(',') })
                    }).done(function (data) {
                        toast.success({ title: "提示", message: "删除成功" });
                        layer.close(index);
                        table.reload('user-table');
                    }).always(function () {
                        loading.loadRemove(500);
                    });
                });
            }



            //多图片上传
            upload.render({
                elem: '#test2'
                , url: '/YuLiaoK/Upload' //此处配置你自己的上传接口即可
                , multiple: true
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo2').append('<img style="width:100px" src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    });
                }
                , done: function (res) {
                    //上传完毕
                    lst.push({ gif: res.result.src, word: res.result.filename });
                }
            });
            window.add = function () {
                layer.open({
                    type: 1,
                    title: '批量新增',
                    area: ['750px','500px'],
                    shade: 0.1,
                    content: $('#win')
                });
            }
            var lst = [];
            form.on('submit(add)', function (data) {
                //
                if ($('#gif').val() == '') {
                    toast.warning({ title: "警告", message: "请先上传手语图片", position: 'topRight' })
                    return;
                }
                //
                var postData = { author: data.field.author, lst: lst }
                http.ajax({
                    url: '/YuLiaoK/batchadd',
                    data: JSON.stringify(postData)
                }).done(function (data) {
                    layer.open({
                        icon: 1, title: '系统提示', content: '上传成功！',
                        yes: function (layero, index) {
                            window.location.reload();
                        }
                    });
                });

                return false;
            });
        })
    </script>
</body>
</html>
